<!--
* @description 参数1
* @fileName 02.vue常用指令01
* @author userName
* @date 2024-01-19 15:22:49
* @version V1.0.0
!-->
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>02.vue常用指令01</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
</head>

<body>
    <div id="app">
        <!-- 插值表达式 -->
        {{msg}}
        <hr>
        <div v-text="msg">hello web</div>
        <hr>
        <div v-html="msg">hello web</div>
        <hr>
        <input type="checkbox" id="checkboxNode" v-bind:checked="checked">
        <hr>
        <img v-bind:src="imgSrc" alt="" srcset="">
        <hr>
        <img :src="imgSrc" alt="" srcset="">
        <hr>
        <!-- 事件 -->
        <button v-on:click="handlerCliMe">点击我</button>
    </div>

    <script>
      
        /*
         vue 提供常用的指令  不同的指定会有不同的渲染方式
          <tag 指令="直接解析data"></tag>
          v-text  解析文本
          v-html  解析超文本
        */
        var vm = new Vue({
            data:{
                msg:"<h1>hello vue</h1>",
                checked:true,
                imgSrc:"../images/a.jpg"
            },
            methods:{
                handlerCliMe() {
                    // console.log("我被点击了...");
                    // console.log(this);
                    this.msg = "hello web44！"
                    this.checked = false
                    this.imgSrc = "../images/b.jpg"

                }
            }
        });
        vm.$mount("#app")
    </script>
</body>

</html>